<template>
  <div>
    <el-card class="box-card" style="margin-top: 30px" v-loading="loading">
      <el-form inline>
        <el-form-item>
          <el-input placeholder="角色名" v-model="searchParams.roleName" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
        <el-button type="default" @click="clearParams">清空</el-button>
      </el-form>

      <div style="margin: 20px 0">
        <el-button type="primary" @click="addRole" v-if="$hasBP('btn.Role.add')">添加角色</el-button>
        <el-button type="danger" >批量删除</el-button>
      </div>

      <el-table :data="RoleList" border stripe style="width: 70%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" align="center" width="100" />
        <el-table-column
          prop="username"
          label="角色名"
          width="400"
          align="center"
        >
          <template v-slot="{ row }">
            <span>{{ row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="warning"
              size="small"
              icon="el-icon-set-up"
              title="分配权限"
              @click="$router.push(`/acl/role/auth?id=${row.id}&roleName=${row.roleName}`)"
              circle
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="el-icon-edit"
              title="修改角色"
              @click="updateRole(row)"
              circle
            ></el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              title="删除角色"
              @click="deleteRole(row.id)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-size="searchParams.limit"
        :page-sizes="[3, 5, 7, 9]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="changeLimit"
        @current-change="changePage"
      />
    </el-card>

    <el-dialog
      :title="roleForm.isEdit ? '修改角色' : '添加角色'"
      :visible.sync="isRoleDialog"
      width="30%"
      @close="handleClose"
    >
      <el-form :model="roleForm" label-width="120px">
        <el-form-item label="请输入角色名" prop="roleName">
          <el-input v-model="roleForm.roleName" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isRoleDialog = false">取 消</el-button>
        <el-button type="primary" @click="roleEnter">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleListApi, removeRoleApi, saveRoleApi, updateRoleApi } from "@/api/acl/role";
export default {
  data() {
    return {
      // 角色列表
      RoleList: [],
      // 搜索参数
      searchParams: {
        page: 1,
        limit: 5,
        roleName:'',
        searchRoleName:''
      },
      total: 10,
      loading: false, // 正在加载中
      roleForm: {
        roleName: "", // 添加或修改的角色名
      },
      isRoleDialog: false, // 添加角色弹窗是否显示
    };
  },
  methods: {
    // 方法 点击搜索
    search() {
      this.searchParams.searchRoleName = this.searchParams.roleName
      this.getRolesList()
    },

    // 方法 点击清空
    clearParams() {
      this.searchParams.searchRoleName = ''
      this.searchParams.roleName = ''
      this.getRolesList()
    },

    // 方法 添加角色
    addRole() {
      this.isRoleDialog = true;
    },

    // 方法 添加/修改角色弹窗 点击确定事件
    async roleEnter() {
      if (this.roleForm.isEdit) {
        delete this.roleForm.isEdit; // 发送请求时 去除isEdit属性
        const res = await updateRoleApi(this.roleForm);
        this.$message.success("修改角色" + res.message);
      } else {
        // 否则是新增
        try {
          const res = await saveRoleApi(this.roleForm);
          this.$message.success("新增角色" + res.message);
        } catch (e) {
          return Promise.reject(e);
        }
      }
      // 清空表单
      this.roleForm = {
        roleName: "",
      };
      this.isRoleDialog = false;
      this.getRolesList();
    },

    // 方法 修改角色
    updateRole(data) {
      data.isEdit = true;
      this.roleForm = data;
      this.isRoleDialog = true;
    },

    // 方法 弹窗关闭的回调
    handleClose() {
      // 清除所有的 isEdit属性  因为 不清除isEdit属性 弹窗无法甄别新增还是修改
      this.roleForm.isEdit = "";
    },

    // 方法 删除角色
    async deleteRole(id) {
      const isDel = await this.$confirm("确定删除该角色?", "删除角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(e=>e)
      if(isDel === 'cancel') return this.$message('取消删除')
      const res = await removeRoleApi(id)
      this.$message.success('删除' + res.message)
      this.getRolesList()
    },

    // 方法 改变当前页
    changePage(newPage) {
      this.searchParams.page = newPage;
      this.getRolesList();
    },

    // 改变每页数量
    changeLimit(newLimit) {
      this.searchParams.limit = newLimit;
      this.getRolesList();
    },

    // 获取角色列表
    async getRolesList() {
      this.loading = true;
      const { page, limit, searchRoleName } = this.searchParams;
      const res = await getRoleListApi(page, limit,searchRoleName);
      this.RoleList = res.data.items;
      // 处理所有的角色加上 isEdit属性  方便区别编辑状态
      this.RoleList.map((item) => {
        item.isEdit = false
        return item
      });
      this.total = res.data.total;
      this.loading = false;
    },
  },

  created() {
    this.getRolesList();
  },
};
</script>

<style>
.el-pagination {
  margin-top: 20px;
}
</style>
